<template>
  <div>
    <video ref="video" :id="randomID" :poster="videoInfo.livePoster" class="my-video video-js vjs-default-skin vjs-big-play-centered" controls
      height="100%" width="100%" webkit-playsinline="" playsinline x5-playsinline x-webkit-airplay="allow" x5nativepanel preload>
      <source :src="videoInfo.livePath" type="application/x-mpegURL">
      <!-- <source src="http://v.godd.site/video/test.m3u8" type="application/x-mpegURL"> -->
    </video>
    <!-- 弹幕插件 -->
    <div id="danmu-pannel" @click="playVideo"></div>
  </div>
</template>
<script>
  export default {
    name: "myVideo",
    props: ['videoInfo'],
    data() {
      return {
        randomID: 'player' + new Date().getTime()
      };
    },
    mounted() {
      this.$nextTick(() => {
        videojs(this.randomID, {
          bigPlayButton: true,
          // textTrackDisplay : false,
          // posterImage: true,
          // errorDisplay : false,
          controlBar: true
        }, function onPlayerReady() {});
      })
    },
    computed: {},
    methods: {
        playVideo(){
            let video = this.$refs.video;
            video.paused ? video.play() : video.pause();
        }
    }
  };

</script>
<style lang="scss">
  .my-video {
    // display: block;
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }

  #danmu-pannel {
    position: fixed !important;
    width: 100vw;
    height: 56vw;
    top: 45px;
  }

</style>
